<template>
  <view class="region-selector">
    <view class="text-[32rpx] font-bold mb-[36rpx]">{{ title }}</view>
    <nut-radio-group
      v-model="selectedValue"
      direction="vertical"
      class="w-full"
      @change="handleChange"
    >
      <view
        v-for="item in regionOptions"
        :key="item.value"
        class="flex items-center py-[20rpx] border-b border-gray-200 last:border-b-0 cursor-pointer select-none text-[28rpx] transition-all"
      >
        <nut-radio
          :label="item.value"
          class="mr-[24rpx] text-blue-600 flex items-center"
        />
        <text
          :class="
            selectedValue === item.value
              ? 'text-blue-600 font-bold'
              : 'text-gray-500'
          "
          >{{ item.label }}</text
        >
        <text class="ml-1 text-gray-400">（信息费{{ item.fee }}元）</text>
      </view>
    </nut-radio-group>
    <view class="text-[28rpx] mt-[24rpx]">
      当前选择：{{ getRegionText(selectedValue) }}，信息费¥{{
        regionFeeMap[selectedValue]
      }}
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'

/**
 * 区域选择器组件
 * @description 用于选择任务发布区域，支持数据提交和回显
 */

interface RegionOption {
  value: string
  label: string
  fee: number
  range: string
}

interface Props {
  /** 组件标题 */
  title?: string
  /** 默认选中的区域值 */
  modelValue?: string
  /** 默认选中的区域范围类型 */
  defaultRange?: string
  /** 是否禁用 */
  disabled?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: string): void
  (e: 'change', value: { value: string; fee: number; range: string }): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '区域选择',
  modelValue: 'city',
  defaultRange: '1',
  disabled: false
})

const emit = defineEmits<Emits>()

/** 当前选中的值 */
const selectedValue = ref(props.modelValue)

/** 区域信息费映射 */
const regionFeeMap: Record<string, number> = {
  city: 1,
  province: 5,
  nation: 8,
}

/** 区域选项配置 */
const regionOptions: RegionOption[] = [
  { value: "city", label: "市级", fee: 1, range: "1" },
  { value: "province", label: "省级", fee: 5, range: "2" },
  { value: "nation", label: "全国", fee: 8, range: "3" },
]

/**
 * 获取区域文本描述
 * @param val 区域值
 * @returns 区域文本
 */
function getRegionText(val: string): string {
  if (val === "city") return "市级"
  if (val === "province") return "省级"
  if (val === "nation") return "全国"
  return ""
}

/**
 * 根据范围类型获取区域值
 * @param range 范围类型
 * @returns 区域值
 */
function getValueByRange(range: string): string {
  const option = regionOptions.find(item => item.range === range)
  return option ? option.value : 'city'
}

/**
 * 根据区域值获取范围类型
 * @param value 区域值
 * @returns 范围类型
 */
function getRangeByValue(value: string): string {
  const option = regionOptions.find(item => item.value === value)
  return option ? option.range : '1'
}

/**
 * 处理选择变化
 * @param value 选中的值
 */
const handleChange = (value: any) => {
  if (props.disabled) return
  
  selectedValue.value = value
  const options = regionOptions.find((item) => item.value === value)
  
  if (options) {
    emit('update:modelValue', value)
    emit('change', {
      value: value,
      fee: options.fee,
      range: options.range
    })
  }
}

/**
 * 初始化默认值
 */
const initDefaultValue = () => {
  if (props.defaultRange && props.defaultRange !== '1') {
    selectedValue.value = getValueByRange(props.defaultRange)
  }
}

/**
 * 监听外部传入的值变化
 */
watch(() => props.modelValue, (newValue) => {
  if (newValue && newValue !== selectedValue.value) {
    selectedValue.value = newValue
  }
})

/**
 * 监听默认范围变化
 */
watch(() => props.defaultRange, () => {
  initDefaultValue()
})

/**
 * 暴露给父组件的方法
 */
defineExpose({
  /**
   * 获取当前选中的完整信息
   */
  getCurrentSelection: () => {
    const option = regionOptions.find(item => item.value === selectedValue.value)
    return option ? {
      value: selectedValue.value,
      label: option.label,
      fee: option.fee,
      range: option.range
    } : null
  },
  
  /**
   * 根据范围类型设置选中值
   */
  setValueByRange: (range: string) => {
    const value = getValueByRange(range)
    selectedValue.value = value
    handleChange(value)
  },
  
  /**
   * 重置为默认值
   */
  reset: () => {
    selectedValue.value = props.modelValue
    initDefaultValue()
  }
})

// 初始化
initDefaultValue()
</script>

<style lang="scss" scoped>
.region-selector {
  background-color: white;
  padding: 40rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
:deep(.nut-radio) {
  margin-bottom: 0 !important;
}
</style>
